<template>
	<view class="credit-card-component">
		<view
			v-if="creditInfo.status === '2' || creditInfo.status === '3'"
			class="credit-module"
		>
			<view class="credit-header">
				<text>先收款，再寄出</text>
				<image
					class="icon-question"
					src="@/static/images/icon_credit_question.png"
					@click="openRule"
				></image>
			</view>
			<view
				class="credit-body"
				:class="[creditInfo.isPrepay ? 'prepay' : '']"
			>
				<view class="credit-title">
					<image class="icon-credit" src="@/static/images/icon_credit.png"></image>
					<view class="title-txt">芝麻速办｜极速回收</view>
					<view class="threshold-txt">芝麻分≥650可享</view>
				</view>
				<view class="credit-h2-title">
					<view class="h2-title-txt">无需等待，先拿预付款</view>
					<view class="credit-status">
						<view
							v-if="creditInfo.status === '3'"
							class="credit-button credit-opened"
							@click="$emit('prepay')"
						>
							<text class="prepay-txt">我要预付</text>
							<image v-if="creditInfo.isPrepay" class="icon-select" src="@/static/images/icon_credit_radio_sel.png"></image>
							<image v-else class="icon-select" src="@/static/images/icon_credit_radio_nor.png"></image>
						</view>
						<view
							v-else
							class="credit-button credit-not-available"
							@click="$emit('open')"
						>
							<text class="open-txt">去开通</text>
							<image class="icon-right" src="@/static/images/icon_credit_right.png"></image>
						</view>
					</view>
				</view>
				<view class="credit-prepay-money">
					<text>本单预计可预付</text>
					<text class="prepay-money">¥{{ creditInfo.preAmount / 100 || 0 }}</text>
				</view>
			</view>
		</view>
		<uv-popup
			ref="creditRulePopup"
			mode="bottom"
			bgColor="transparent"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="false"
		>
			<hsb-business-credit-rule
				@close="$refs.creditRulePopup.close()"
			/>
		</uv-popup>
		<uv-popup
			ref="creditResultPopup"
			mode="bottom"
			bgColor="transparent"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="false"
		>
			<hsb-business-credit-result
				:evInfo="evInfo"
				:creditInfo="creditInfo"
				:discountInfo="discountInfo"
				@close="$refs.creditResultPopup.close()"
			/>
		</uv-popup>
	</view>
</template>

<script>
export default {
	props: {
		evInfo: Object,
		creditInfo: Object,
		discountInfo: Object
	},
	methods: {
		openRule () {
			this.$refs.creditRulePopup.open()
		},
		openResult () {
			this.$refs.creditResultPopup.open()
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>